<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
        <meta name="title" th:content="'首页_'+${title}" />
        <meta name="description" th:content="${description}" />
        <meta name="keywords" th:content="${keywords}" />
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div id="root">
			<div>
				<div class="cOYSvF">
					<div class="header-page"></div>
					<div class="swiper-banner swiper-container">
						<div class="swiper-wrapper">
							<div th:each="banner :${banners}" class="swiper-slide"
								th:style="'background: url(' + ${banner.images} + ');'"></div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<div class="eZHbVe">
						<div class="gtPiUu">
							<div style="text-align: center;">
								<img class="typeTitle" src="img/title1.png" alt="">
							</div>
							<div class="hWOAOd">
								<div class="dJzMTK">
									<!-- 产品分类循环 -->
									<div class="hlTgQI" th:each="catagory :${catagoryVos}">
										<ul class="iwdthw">
											<li class="iCFbap">
												<span class="WJaRe" th:text="${catagory.label}">汽车整车</span>
												<i class="bdFrfb fa fa-angle-down"></i>
												<div class="liShow">
													<ul class="HUkLV" th:each="child :${catagory.children}">
														<li class="ePRGup">
															<a class="hkJkEM" th:text="${child.label}"
																th:href="@{'product/'+${child.value}+'.html'}">乘用车</a>
														</li>
													</ul>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="fYhPIk">
							<div style="text-align: center;">
								<img class="typeTitle" src="img/title2.png" alt="">
							</div>
							<div class="dALGZw clearfix">
								<!-- 新品发布循环 -->
								<div class="ePtQNc fGerKH card" th:each="product :${products}">
									<div class="fFDaJv TileInset">
										<div class="fbCVyG">
											<a class="jQCsOM" th:href="@{'product/detail/'+${product.id}+'.html'}">
												<div class="cQMvjT">
													<div class="iKEEuh">NEW</div>
												</div>
												<div class="dHdbST">
													<img th:src="${product.images}">
												</div>
											</a>
											<div>
												<a th:href="@{'product/detail/'+${product.id}+'.html'}" class="hXrWiO">
													<img th:src="${product.shopLogo}" alt="">
												</a>
											</div>
											<a class="jQCsOM" th:href="@{'product/detail/'+${product.id}+'.html'}">
												<div class="WYEsF">
													<span class="bnZyoU" th:text="${product.productName}">photovoltaic
														moduletester</span>
													<span class="fFqYLA" th:text="${product.sep}">PVM-1020KIT</span>
													<div class="iZjOOz">
														<span class="mpfqi" th:each="item :${#strings.listSplit(product.productLable,',')}"
                                                      th:text="${item}">insulation</span>
                                            </div>
                                        </div>
                                        <div class="iDWJtQ">
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-comp">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <!-- 轮播图循环 -->
                            <div class="swiper-slide" th:each="shop :${shops}">
                                <img th:src="${shop.logo}" alt="">
                            </div>
                            <!-- 结束 -->
                        </div>
                        <div class="swiper-button-prev"></div>
                        <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
                        <div class="swiper-button-next"></div>
                        <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
                    </div>
                </div>
                <div class="news">
                    <div style="text-align: center;position: relative;">
                        <img class="typeTitle" src="img/title3.png" alt="">
                        <a href="news.html" class="lookMore">查看更多>></a>
                    </div>
                    <div class="news-box clearfix">
                        <!-- 新闻发布循环结束 -->
                        <a target="_blank" th:href="@{'shops/'+${journalism.shopId}+'/news/detail/'+${journalism.id}+'.html'}" class="newsList" th:each="journalism :${journalisms}">
                            <div class="newsBox">
                                <div class="newsImg">
                                    <img th:src="${journalism.images}" alt="">
                                </div>
                                <div class="newsCont">
                                    <p th:text="${journalism.title}">昔日有酒昔日醉，今朝文创焕新姿！</p>
                                    <div th:text="${journalism.abstractInfo}">一年一度的多伦多电影节，因为吸引众多一线明星来做首映宣传，已经蛮声世界。但您...</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="activity">
                    <div style="text-align: center;position: relative;">
                        <img class="typeTitle" src="img/title4.png" alt="">
                        <a href="activity.html" class="lookMore">查看更多>></a>
                    </div>
                    <div class="activityBox clearfix">
                        <!-- 同期活动循环 -->
                        <div class="activityList" th:each="activity :${activitys}">
                            <div class="activityImg">
                                <img th:src="${activity.images}" alt="">
                            </div>
                            <div class="activityCont">
                                <p th:text="${activity.title}">昔日有酒昔日醉，今朝文创焕新姿！</p>
                                <div class="activityPoint">地址：<span th:text="${activity.address}">观音上商务区4号楼403b</span></div>
                                <div class="activityPoint">主办单位：<span th:text="${activity.shopName}">厦门市华美云海科技活动</span></div>
                                <div class="activityPoint">活动时间：<span th:text="${#dates.format(activity.currTime)}"></span></div>
                                <a target="_blank" th:href="@{'shops/'+${activity.shopId}+'/activity/detail/'+${activity.id}+'.html'}" class="activityBtn">立即查看</a>
                                <div class="activityNum" th:text="${activity.remarks}">
                                    已有200人报名
                                </div>
                            </div>
                        </div>
                        <!-- 同期活动循环结束 -->

                    </div>
                </div>
                <div class="project">
                    <div style="text-align: center;position: relative;">
                        <img class="typeTitle" src="img/title5.png" alt="">
                        <a href="business.html" class="lookMore">查看更多>></a>
                    </div>
                    <div class="project-box clearfix">
                        <!-- 采购项目循环 -->
                        <div class="projectList" th:each="item :${business}">
                            <a th:href="@{'business/detail/'+${item.id}+'.html'}" class="projectBox clearfix">
                                <div class="projectImg fl">
                                    <img th:src="${item.images}" alt="">
                                </div>
                                <div class="projectCont fl">
                                    <p th:text="${item.title}">昔日有酒昔日醉，今朝文创焕新姿！</p>
                                    <div th:text="${item.abstractInfo}">一年一度的多伦多电影节，因为吸引众多一线明星来做首映宣传，已经蛮声世界。但您知不知道...</div>
                                </div>
                            </a>
                        </div>
                        <!-- 采购项目循环结束 -->
                    </div>
                </div>
                <div class="container" style="margin: 60px auto;">
                    <h4 class="jFvKRM"><span class="brmlpN">已浏览的产品</span></h4>
                    <div class="jmChuU"><a class="dKLMov forceCursor" onclick="emptyHistory()">清除历史记录</a></div>
                    <div class="dALGZw history clearfix">
                        <!-- 浏览记录循环 -->
                        <!-- <div class="ePtQNc fGerKH card">
                            <div class="fFDaJv TileInset">
                                <div class="fbCVyG">
                                    <a class="jQCsOM" href="detail.html">
                                        <div class="dHdbST">
                                            <img src="img/good.jpg">
                                        </div>
                                    </a>
                                    <div>
                                        <a href="detail.html" class="hXrWiO">
                                            <img src="img/shopLogo.gif" alt="PICVISA">
                                        </a>
                                    </div>
                                    <a class="jQCsOM" href="detail.html">
                                        <div class="WYEsF">
                                            <span class="bnZyoU">photovoltaic moduletester</span>
                                            <span class="fFqYLA">PVM-1020KIT</span>
                                            <div class="iZjOOz">
                                                <span class="mpfqi">insulation</span>
                                                <span class="mpfqi">safety</span>
                                                <span class="mpfqi">voltage</span>
                                            </div>
                                        </div>
                                        <div class="iDWJtQ">
                                        </div>
                                    </a>
                                </div>
                                <div class="cardWithClose" title="删除">
                                    <button aria-label="删除" type="button" class="dDKRIF" onclick="dellItem(this)">
                                        <i class="kqKiJx fa fa-close" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        </div> -->
                        <!-- 浏览记录循环结束 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-page"></div>
    <div class="login-cli"></div>
</div>
<script>
    $(function() {
        $(".header-page").load("http://122.14.195.113:8089/header.html");
        $(".footer-page").load("http://122.14.195.113:8089/footer.html");
        $(".login-cli").load("http://122.14.195.113:8089/login-cli.html");
    });
    $('.iwdthw').click(function() {
        $(this).siblings().find('.liShow').hide(500)
        $(this).parents('.hlTgQI').siblings().find('.liShow').hide(500)
        $(this).toggleClass('iwdthw-click')
        $(this).find('.liShow').toggle(500)
    })
    var swiper = new Swiper('.swiper-banner', {
        spaceBetween: 0,
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        observer: true,
        observeParents: true,
        watchOverflow: true
    });
    var mySwiper = new Swiper('.swiper-comp .swiper-container', {
        slidesPerView: 'auto',
        spaceBetween: 15,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        observer: true,
        observeParents: true,
        watchOverflow: true,
        breakpoints: {
            320: {
                slidesPerView: 2
            },
            768: {
                slidesPerView: 4
            },
            1280: { //当屏幕宽度大于等于1280
                slidesPerView: 7,
            }
        }
    });
	let historyList = []
	$('.history').html('')
	if (localStorage.getItem('history')) {
		historyList = JSON.parse(localStorage.getItem('history'))
		historyList.forEach(item => {
			item.productLable = JSON.stringify(item.productLable)
			let msg = `<div class="ePtQNc fGerKH card">
							<div class="fFDaJv TileInset">
								<div class="fbCVyG">
									<a class="jQCsOM" href="${'productdetail/'+item.id+'.html'}">
										<div class="dHdbST">
											<picture><img src="${item.images}"></picture>
										</div>
									</a>
									<div>
										<a href="${'productdetail/'+item.id+'.html'}" class="hXrWiO">
											<img src="${item.shopLogo}">
										</a>
									</div>
									<a class="jQCsOM" href="${'productdetail/'+item.id+'.html'}">
										<div class="WYEsF">
											<span class="bnZyoU">${item.productName}</span>
											<span class="fFqYLA">PVM-1020KIT</span>
											<div class="iZjOOz">`
											item.productLable.forEach((tag) =>{
												msg += `<span class="mpfqi">${tag}</span>`
											})	
										msg +=	`</div>
										</div>
									</a>
								</div>
								<div class="cardWithClose" title="删除">
									<button aria-label="删除" type="button" class="dDKRIF" onclick="dellItem(this,${item.id})">
										<i class="kqKiJx fa fa-close" aria-hidden="true"></i>
									</button>
								</div>
							</div>
						</div>`
			$('.history').append(msg)
		})
	}
	function dellItem(that,id){
		historyList.forEach((item, index) => {
			if (item.id == id) {
				historyList.splice(index, 1)
			}
		})
		$(that).parents('.card').remove()
		// window.location.href = window.location.href
	}
</script>
</body>
</html>
